<template>
    <div class="wrapper" ref="wrapper">
      <slot></slot>
    </div>
</template>

<script>
  import BScroll from 'better-scroll'
    export default {
        name: "scroll",
      props: {
        // BS Readme
        // 滚动监听
        // 1无法监听实时滚动
        probeType: {
          type: Number,
          default: 1
        },
        // 是否手动派发点击
        click: {
            type: Boolean,
          default: true
        },
        // 监听数据变化
        data: {
            type: Array,
          default: null
        },
        // 让scroll监听滚动事件
        listenScroll: {
          type: Boolean,
          default: false
        },
        // 上拉加载更多
        pullup: {
          type: Boolean,
          default: false
        },
        // 下拉刷新
        pulldown: {
          type: Boolean,
          default: false
        }
      },
      mounted() {
          // 确保页面已经渲染
          setTimeout(() => {
            this._initScroll()
          },20)
      },
      // 初始化方法
      methods: {
          _initScroll() {
            // wrapper dom不存在
            if (!this.$refs.wrapper) {
              return
            }
            this.scroll = new BScroll(this.$refs.wrapper, {
              probeType: this.probeType,
              click: this.click
            });
            // 如果监听到滚动
            if (this.listenScroll) {
              // 监听其位置
              let me = this;
              this.scroll.on('scroll', (pos) => {
                me.$emit('scroll',pos)
              })
            }
            // 监听下拉加载更多
            if (this.pullup) {
              // 当滚动结束时派发scrollend
              this.scroll.on('scrollEnd',() => {
                // 当滚动到底部
                if (this.scroll.y <= (this.scroll.maxScrollY + 50)) {
                  this.$emit('scrollToEnd')
                }
              })
            }

            if (this.pullup) {
              console.log('1')
              this.scroll.on ('pullDown',() => {
                /*if (this.scroll.y > (this.scroll.maxScrollY + 20)) {
                  this.$emit('finishPullDown')
                }*/
                this.$emit('pullingDown')

              })
            }
          },

        // 代理scroll方法
        enable() {
            this.scroll && this.scroll.enable()
        },
        disable() {
            this.scroll && this.scroll.disable()
        },
        refresh() {
            this.scroll && this.scroll.refresh()
        },
        scrollTo() {
            // 使用apply接收参数传入scroll
            this.scroll && this.scroll.scrollTo.apply(this.scroll,arguments)
        },
        scrollToElement() {
            this.scroll && this.scroll.scrollToElement.apply(this.scroll,arguments)
        }
      },
      watch: {
          data() {
            // 数据变化重新刷新
            setTimeout(() => {
              this.refresh()
            },20)
          }
      }
    }
</script>

<style scoped>

</style>
